<%
  const isCrypto = ob.listing.metadata.contractType === 'CRYPTOCURRENCY';
  const coinType = ob.listing.metadata.coinType;

  if (ob.order.shipping && ob.order.shipping.country !== 'NA') {
    var addressLine3 = `${ob.order.shipping.city ? `${ob.order.shipping.city}${ob.order.shipping.state ? ',' : ''}` : ''}${ob.order.shipping.state ? ` ${ob.order.shipping.state}` : ''}`;
    if (ob.order.shipping.postalCode) addressLine3 += `${addressLine3 ? ' ' : ''}${ob.order.shipping.postalCode}`;
    var addressLine4 = ob.getCountryByDataName(ob.order.shipping.country).translatedName;
    let addressParts = [];

    if (ob.order.shipping.address) addressParts.push(ob.order.shipping.address);
    if (ob.order.shipping.city) addressParts.push(ob.order.shipping.city);
    if (ob.order.shipping.postalCode) addressParts.push(ob.order.shipping.postalCode);
    if (ob.order.shipping.country) addressParts.push(ob.order.shipping.country);

    addressParts
      .map(addressPart => {
        return addressPart.replace('/r', '')
          .replace('/n', '')
          .replace(/\s/g, '+');
      });

    let queryString = encodeURIComponent(addressParts.join(','));

    var mapUrl = `https://www.google.com/maps/place/${queryString}`;
  }

  // For now we're only supporting one item per order, so we'll hard-code a reference to the
  // first item.
  var item = ob.order.items[0];
%>
<h2 class="tx4 margRTn"><%= ob.polyT('orderDetail.summaryTab.orderDetails.heading') %></h2>
<span class="clrT2 tx5b"><%= ob.moment(ob.order.timestamp).format('lll') %></span>
<div class="border clrBr padMd">
  <div class="flex gutterH clrT">
    <a href="#<%= `${ob.listing.vendorID.peerID}/store/${ob.listing.slug}` %>" class="listingThumbCol flexNoShrink" style="<%= ob.getAvatarBgImage(ob.listing.item.images[0]) %>"></a>
    <div class="flexExpand tx5">
      <div class="flex gutterH">
        <div class="flexExpand">
          <%
            let title = ob.listing.item.title;

            if (isCrypto) {
              title = ob.crypto.tradingPair({
                className: 'cryptoTradingPairSm',
                fromCur: ob.listing.metadata.acceptedCurrencies[0],
                toCur: coinType,
              });
            }
          %>
          <a href="#<%= `${ob.listing.vendorID.peerID}/store/${ob.listing.slug}` %>" class="txB clrT inlineBlock <% if (ob.description || isCrypto) print('rowTn') %>"><%= title %></a>
          <% if (ob.sku) { %>
            <div><%= ob.polyT('orderDetail.summaryTab.orderDetails.skuLabel') %>: <%= ob.sku %></div>
          <% } %>
          <% if (item.options && item.options.length) { %>
            <div><%= item.options.map(option => `${option.name}:&nbsp;${option.value}`).join(',&nbsp;') %></div>
          <% } %>
          <% if (isCrypto) { %>
            <%
              const copyLink = item.bigQuantity ?
                `<a class="js-copyCryptoQuantity clrTEm" data-quantity="${ item.bigQuantity}"> ${ob.polyT('orderDetail.summaryTab.orderDetails.copyLink')}</a>` : '';
            %>
            <div class="rowTn">
              <span class="txB"><%= ob.polyT('orderDetail.summaryTab.orderDetails.quantityHeading') %>:</span> <%= ob.currencyMod.convertAndFormatCurrency(item.bigQuantity, coinType) %><%= copyLink %>
            </div>
            <div class="clrT2 hide orderDetailsCopiedToClipboard js-cryptoQuantityCopiedToClipboard"><%= ob.polyT('copiedToClipboard') %></div>
          <% } %>          
        </div>
      </div>
      <hr class="clrBr" />
      <div class="flexRow gutterH">
        <div class="col4">
          <div class="gutterVTn <% if (isCrypto) print('row') %>">
            <div class="txB"><%= ob.polyT('orderDetail.summaryTab.orderDetails.shipToHeading') %></div>
            <% if (ob.order.shipping && ob.order.shipping.country !== 'NA') { %>
              <div><%= ob.order.shipping.shipTo %></div>
              <% if (ob.order.shipping.address) { %>
                <div><%= ob.order.shipping.address %></div>
              <% } %>
              <% if (addressLine3) { %>
                <div><%= addressLine3 %></div>
              <% } %>
                <div><%= addressLine4 %></div>
              <%
                let clipboardAddress = [ob.order.shipping.shipTo];
                if (ob.order.shipping.address) clipboardAddress.push(ob.order.shipping.address);
                if (addressLine3) clipboardAddress.push(addressLine3);
                if (addressLine4) clipboardAddress.push(addressLine4);
                clipboardAddress = clipboardAddress.join('\n');
              %>
              <div class="gutterH">
                <a class="js-copyAddress clrTEm" data-address="<%= clipboardAddress %>"><%= ob.polyT('orderDetail.summaryTab.orderDetails.copyLink') %></a>
                <a class="clrTEm" href="<%= mapUrl %>"><%= ob.polyT('orderDetail.summaryTab.orderDetails.viewOnMap') %></a>
              </div>
              <% if (ob.order.shipping.addressNotes) { %>
                <div class="addressNotes gutterVTn">
                  <div>
                    <b><%= ob.polyT('orderDetail.summaryTab.orderDetails.addressNotes') %></b>
                  </div>
                  <div>
                    <%= ob.order.shipping.addressNotes %>
                  </div>
                </div>
              <% } %>
            <% } else { %>
              <%= ob.polyT('orderDetail.summaryTab.notApplicable') %>
            <% } %>
            <span class="clrT2 hide orderDetailsCopiedToClipboard js-orderDetailsCopiedToClipboard"><%= ob.polyT('copiedToClipboard') %></span>
          </div>
          <% if (isCrypto) { %>
            <div class="gutterVTn">
              <%
                const cointTypeNameKey = `cryptoCurrencies.${coinType}`;
                const coinTypeName = ob.polyT(cointTypeNameKey);
              %>
              <div class="txB cryptoAddress">
                <%= ob.polyT('orderDetail.summaryTab.orderDetails.paymentAddressHeading', {
                  coinType: coinTypeName === cointTypeNameKey ?
                    coinType : coinTypeName,
                  icon: ob.crypto.cryptoIcon({
                    code: ob.listing.metadata.coinType,
                  }),
                }) %>
              </div>
              <div class="flex gutterHSm">
                <div class="clamp2 cryptoPaymentAddress"><%= item.paymentAddress %></div>
                <div>
                  <a class="js-copyCryptoAddress clrTEm" data-address="<%= item.paymentAddress %>"><%= ob.polyT('orderDetail.summaryTab.orderDetails.copyLink') %></a>
                </div>
              </div>
              <span class="clrT2 hide orderDetailsCopiedToClipboard js-cryptoAddressCopiedToClipboard"><%= ob.polyT('copiedToClipboard') %></span>
            </div>
          <% } %>
        </div>
        <div class="col8">
          <div class="row">
            <div class="flexRow gutterH row">
              <div class="col6">
                <div class="txB"><%= ob.polyT('orderDetail.summaryTab.orderDetails.couponHeading') %></div>
                <% if (item.couponCodes && item.couponCodes.length) { %>
                  <div><%= item.couponCodes.join(', ') %></div>
                <% } else { %>
                  <div><%= ob.polyT('orderDetail.summaryTab.notApplicable') %></div>
                <% } %>
              </div>
              <% if (!isCrypto) { %>
                <div class="col6">
                  <div class="txB rowTn"><%= ob.polyT('orderDetail.summaryTab.orderDetails.quantityHeading') %></div>
                  <div><%= item.bigQuantity %></div>
                </div>
              <% } %>
            </div>
            <div class="flexRow gutterH row">
              <div class="col6">
                <div class="txB rowTn"><%= ob.polyT('orderDetail.summaryTab.orderDetails.moderatorHeading') %></div>
                <% if (ob.isModerated) { %>
                  <div class="js-moderatorContainer"></div>
                <% } else { %>
                  <%= ob.polyT('orderDetail.summaryTab.notApplicable') %>
                <% } %>
              </div>
              <div class="col6">
                <div class="txB rowTn"><%= ob.polyT('orderDetail.summaryTab.orderDetails.totalHeading') %></div>
                <div>
                  <%
                    let bigAmount;
                    let bigAmountCur;

                    try {
                      bigAmount = ob.order.payment.bigAmount;
                      bigAmountCur = ob.order.payment.amountCurrency.code;
                    } catch (e) {
                      // pass
                    }
                  %>
                  <%=
                    ob.currencyMod.pairedCurrency(
                      bigAmount,
                      bigAmountCur,
                      ob.userCurrency
                    )
                  %>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <hr class="clrBr" />
      <div class="flexRow gutterH">
        <div class="col6">
          <div class="gutterVTn">
            <div class="txB"><%= ob.polyT('orderDetail.summaryTab.orderDetails.shippingOption') %></div>
            <div><%= item.shippingOption && item.shippingOption.name ? item.shippingOption.name : ob.polyT('orderDetail.summaryTab.notApplicable') %></div>
          </div>
        </div>
        <div class="col6">
          <div class="gutterVTn">
            <div class="txB"><%= ob.polyT('orderDetail.summaryTab.orderDetails.shippingService') %></div>
            <div><%= item.shippingOption && item.shippingOption.service ? item.shippingOption.service : ob.polyT('orderDetail.summaryTab.notApplicable') %></div>
          </div>
        </div>
      </div>
      <hr class="clrBr" />
      <div class="flexRow gutterH">
        <div class="col6">
          <div class="gutterVTn">
            <div class="txB"><%= ob.polyT('orderDetail.summaryTab.orderDetails.memo') %></div>
            <div class="memo"><%= item.memo ? ob.parseEmojis(item.memo) : ob.polyT('orderDetail.summaryTab.notApplicable') %></div>
          </div>
        </div>
        <div class="col6">
          <div>
            <div class="gutterVTn">
              <div class="txB"><%= ob.polyT('orderDetail.summaryTab.orderDetails.alternateContact') %></div>
              <div><%= ob.order.alternateContactInfo ? ob.order.alternateContactInfo : ob.polyT('orderDetail.summaryTab.notApplicable') %></div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
